<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隧道监测系统</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        body {
            min-height: 1024px;
            background-color: #f8fafc;
        }

       .container {
            width: 1440px;
            margin: 0 auto;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="fixed top-0 left-0 w-full bg-white shadow-sm z-50" style="display: block;">
        <div class="container flex items-center justify-between h-16 px-6">
            <div class="flex items-center space-x-2">
                <span class="text-2xl font-['Pacifico'] text-primary">logo</span>
                <span class="text-xl font-medium">隧道监测系统</span>
            </div>
            <div class="flex items-center space-x-6">
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-bell w-4 h-4 flex items-center justify-center"></i>
                    <span>通知</span>
                </button>
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-cog w-4 h-4 flex items-center justify-center"></i>
                    <span>设置</span>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-user text-gray-600"></i>
                    </div>
                    <span class="text-gray-700">管理员</span>
                </div>
            </div>
        </div>
    </div>

    <div class="container flex mt-16">
        <div class="w-48 min-h-[calc(100vh-64px)] bg-white shadow-sm pt-6">
            <div class="px-4 py-2">
                <div class="text-sm font-medium text-gray-400">主导航</div>
                <div class="mt-2 space-y-1">
                    <a style="line-height: 50px;" href="./index1.html"
                        class="w-full px-3 py-2 text-sm text-left text-primary bg-blue-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-exclamation-triangle mr-2"></i>数据采集监测
                    </a>
                    <a style="line-height: 50px;" href="./index2.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-chart-line mr-2"></i>风险评估分析
                </a>
                    <a style="line-height: 50px;" href="./index3.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-ambulance mr-2"></i>应急响应方案
                    </a>
                    <a style="line-height: 50px;" href="./index4.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-clipboard-list mr-2"></i>监测维护记录
                    </a>
                </div>
            </div>
        </div>

        <div class="flex-1 p-6">
            <div class="grid grid-cols-4 gap-4 mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="text-sm text-gray-500 mb-2">实时温度</div>
                    <div class="text-2xl font-medium">26.5°C</div>
                    <div class="mt-2 text-sm text-green-500">
                        <i class="fas fa-arrow-up mr-1"></i>2.1°C
                    </div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="text-sm text-gray-500 mb-2">实时湿度</div>
                    <div class="text-2xl font-medium">68%</div>
                    <div class="mt-2 text-sm text-red-500">
                        <i class="fas fa-arrow-down mr-1"></i>5%
                    </div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="text-sm text-gray-500 mb-2">空气质量</div>
                    <div class="text-2xl font-medium">优</div>
                    <div class="mt-2 text-sm text-green-500">
                        <i class="fas fa-check-circle mr-1"></i>正常
                    </div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="text-sm text-gray-500 mb-2">水位监测</div>
                    <div class="text-2xl font-medium">2.8m</div>
                    <div class="mt-2 text-sm text-yellow-500">
                        <i class="fas fa-exclamation-circle mr-1"></i>警戒
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">温湿度趋势</div>
                        <div class="flex space-x-2">
                            <button data-range="today"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">今日</button>
                            <button data-range="week"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">本周</button>
                            <button data-range="month"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">本月</button>
                        </div>
                    </div>
                    <div id="tempHumidChart" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">水位变化</div>
                        <div class="flex space-x-2">
                            <button data-range="real-time"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">实时</button>
                            <button data-range="24-hours"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">24小时</button>
                        </div>
                    </div>
                    <div id="waterLevelChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">车流量统计</div>
                        <div class="flex space-x-2">
                            <button data-range="hourly"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">小时</button>
                            <button data-range="daily"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">日期</button>
                            <button data-range="monthly"
                                class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded-button whitespace-nowrap">月份</button>
                        </div>
                    </div>
                    <div id="trafficChart" style="width: 100%; height: 300px;"></div>
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-gray-700 font-medium">形变监测</div>
                        <button
                            class="px-3 py-1 text-sm text-primary hover:bg-blue-50 rounded-button whitespace-nowrap">
                            <i class="fas fa-download mr-1"></i>导出数据
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left text-sm text-gray-500">
                                    <th class="pb-3">监测点</th>
                                    <th class="pb-3">止水条形变</th>
                                    <th class="pb-3">仰拱隆起</th>
                                    <th class="pb-3">状态</th>
                                </tr>
                            </thead>
                            <tbody class="text-sm">
                                <tr class="border-t">
                                    <td class="py-3">K32+580</td>
                                    <td>2.1mm</td>
                                    <td>1.8mm</td>
                                    <td><span class="text-green-500">正常</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3">K32+600</td>
                                    <td>3.5mm</td>
                                    <td>2.9mm</td>
                                    <td><span class="text-yellow-500">警告</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3">K32+620</td>
                                    <td>1.8mm</td>
                                    <td>1.5mm</td>
                                    <td><span class="text-green-500">正常</span></td>
                                </tr>
                                <tr class="border-t">
                                    <td class="py-3">K32+640</td>
                                    <td>4.2mm</td>
                                    <td>3.6mm</td>
                                    <td><span class="text-red-500">危险</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const tempHumidChart = echarts.init(document.getElementById('tempHumidChart'));
        const waterLevelChart = echarts.init(document.getElementById('waterLevelChart'));
        const trafficChart = echarts.init(document.getElementById('trafficChart'));

        // 温湿度趋势的不同数据集
        const tempHumidData = {
            today: {
                xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                temperature: [23, 22, 21, 24, 26, 27, 26, 25],
                humidity: [65, 70, 75, 70, 65, 60, 65, 68]
            },
            week: {
                xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                temperature: [22, 23, 24, 25, 26, 25, 24],
                humidity: [60, 62, 65, 63, 64, 61, 60]
            },
            month: {
                xAxis: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                temperature: [20, 21, 22, 23, 24, 25, 24, 23, 22, 21],
                humidity: [55, 58, 60, 62, 64, 63, 62, 60, 58, 56]
            }
        };

        // 水位变化的不同数据集
        const waterLevelData = {
            'real-time': {
                xAxis: ['10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00'],
                data: [2.5, 2.6, 2.7, 2.8, 2.8, 2.7, 2.8]
            },
            '24-hours': {
                xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                data: [2.2, 2.3, 2.4, 2.5, 2.6, 2.5, 2.4, 2.3]
            }
        };

        // 车流量统计的不同数据集
        const trafficData = {
            hourly: {
                xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                data: [120, 80, 150, 280, 320, 350, 400, 280]
            },
            daily: {
                xAxis: ['1', '2', '3', '4', '5', '6', '7'],
                data: [500, 600, 450, 550, 650, 580, 620]
            },
            monthly: {
                xAxis: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                data: [1000, 1200, 1100, 1300, 1400, 1350, 1450, 1400, 1300, 1250, 1200, 1150]
            }
        };

        // 初始化温湿度趋势图表
        function initTempHumidChart() {
            tempHumidChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度', '湿度']
                },
                xAxis: {
                    type: 'category',
                    data: tempHumidData.today.xAxis
                },
                yAxis: [{
                    type: 'value',
                    name: '温度(°C)'
                }, {
                    type: 'value',
                    name: '湿度(%)'
                }],
                series: [{
                    name: '温度',
                    type: 'line',
                    data: tempHumidData.today.temperature
                }, {
                    name: '湿度',
                    type: 'line',
                    yAxisIndex: 1,
                    data: tempHumidData.today.humidity
                }]
            });
        }

        // 初始化水位变化图表
        function initWaterLevelChart() {
            waterLevelChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: waterLevelData['real-time'].xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '水位(m)'
                },
                series: [{
                    data: waterLevelData['real-time'].data,
                    type: 'line',
                    areaStyle: {}
                }]
            });
        }

        // 初始化车流量统计图表
        function initTrafficChart() {
            trafficChart.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: trafficData.hourly.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '车流量(辆/小时)'
                },
                series: [{
                    data: trafficData.hourly.data,
                    type: 'bar'
                }]
            });
        }

        // 初始化所有图表
        initTempHumidChart();
        initWaterLevelChart();
        initTrafficChart();

        // 为温湿度趋势按钮添加事件监听器
        document.querySelectorAll('[data-range="today"], [data-range="week"], [data-range="month"]').forEach(button => {
            button.addEventListener('click', () => {
                const range = button.getAttribute('data-range');
                tempHumidChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: tempHumidData[range].xAxis
                    },
                    series: [{
                        name: '温度',
                        type: 'line',
                        data: tempHumidData[range].temperature
                    }, {
                        name: '湿度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: tempHumidData[range].humidity
                    }]
                });
            });
        });

        // 为水位变化按钮添加事件监听器
        document.querySelectorAll('[data-range="real-time"], [data-range="24-hours"]').forEach(button => {
            button.addEventListener('click', () => {
                const range = button.getAttribute('data-range');
                waterLevelChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: waterLevelData[range].xAxis
                    },
                    series: [{
                        data: waterLevelData[range].data,
                        type: 'line',
                        areaStyle: {}
                    }]
                });
            });
        });

        // 为车流量统计按钮添加事件监听器
        document.querySelectorAll('[data-range="hourly"], [data-range="daily"], [data-range="monthly"]').forEach(button => {
            button.addEventListener('click', () => {
                const range = button.getAttribute('data-range');
                trafficChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: trafficData[range].xAxis
                    },
                    series: [{
                        data: trafficData[range].data,
                        type: 'bar'
                    }]
                });
            });
        });


        window.addEventListener('resize', function () {
            tempHumidChart.resize();
            waterLevelChart.resize();
            trafficChart.resize();
        });
    </script>
</body>

</html>